import { useState, useEffect } from 'react'
// 导入useFormik hook
import { useFormik } from 'formik'
// 表单校验
import * as Yup from 'yup'
import styles from './index.module.scss'
// 导入ajax请求
// import axios from 'axios'
// axios转换成http导入 后面再添加setToken
import { http, setToken } from '../../utils'
// 导入antd-mobile组件
import { Toast } from 'antd-mobile'
// 定时器ID
let timerId = -1

const Login = ({ history }) => {
  // 倒计时的事件,单位是秒
  const [time, setTime] = useState(0)
  // Formik 实现表单提交
  const formik = useFormik({
    // useFormik 的参数是一个配置对象
    // initialValues是表单提交项的默认值
    initialValues: {
      mobile: '',
      code: '',
    },
    // 表单验证使用Yup包来进行验证
    validationSchema: Yup.object({
      mobile: Yup.string()
        .required('手机号码为必填项')
        .matches(/^1[3-9]\d{9}$/, '手机号码格式不正确'),
      code: Yup.string()
        .required('验证码为必填项')
        .matches(/^\d{6}$/, '验证码不正确'),
    }),
    // 表单提交事件
    // 登录的逻辑代码写在此处

    onSubmit: async values => {
      // console.log('表单项的值', values)
      try {
        const res = await http.post('/authorizations', values)
        if (res.data.message.toLowerCase() === 'ok') {
          Toast.info('登录成功', 1, () => {
            // 1返回首页
            history.push('/home')
            // 2.存储token
            // 注意：该项目中，token 和 refresh_token 都要用，所以，此处将两个 token 一起存储到本地缓存中
            // localStorage.setItem('geek-app-87', JSON.stringify(res.data.data))
            // 已封装token
            setToken(res.data.data)
          })
        }
      } catch (e) {
        console.dir(e)
        Toast.info(e.response.data.message, 2)
      }
    },
  })

  // 发送请求获取验证码
  const getCode = async () => {
    // 判断剩余秒数,余秒小于0就允许再次发送
    // 大于等于0就不允许再次发送
    if (time > 0) return

    const { mobile } = formik.values
    console.log(mobile)
    // 使用正则校验手机号码
    if (!/^1[2-9]\d{9}$/.test(mobile)) return

    // 将倒计时事件更新为60
    setTime(60)
    clearInterval(timerId)
    timerId = setInterval(() => {
      setTime(time => {
        if (time === 1) {
          clearInterval(timerId)
        }
        return time - 1
      })
    }, 1000)
    // 手机号码验证成功
    try {
      await http.get(`/sms/codes/${mobile}`)
    } catch (e) {}
  }
  // handleSubmit处理表单提交的事件
  const {
    handleChange,
    handleSubmit,
    handleBlur,
    values: { mobile, code },
    // 表示当前表单是否被摸过
    touched,
    // 表单验证失败时的信息
    errors,
    //表示表单验证是否成功 成功为true失败为false,默认值为true
    isValid,
  } = formik
  // console.log(isvalid);
  // Object.keys(touched) 用来获取对象中所有的键，结果为数组
  // 如果得到的数组长度为 0，说明对象中没有属性，也就是 两个表单元素
  // 都没有获得过焦点，也就是第一次点击
  const isFirst = Object.keys(touched).length === 0
  return (
    <div className={styles.root}>
      <h1 className="title">账号登录</h1>
      <div className="login-wrap">
        <form onSubmit={handleSubmit}>
          <div className="form-item">
            {/* 需要添加name属性 */}
            <input
              name="mobile"
              value={mobile}
              onChange={handleChange}
              onBlur={handleBlur}
              type="text"
              placeholder="请输入手机号"
            />
            <div className="error">
              {touched.mobile && errors.mobile ? <div>{errors.mobile}</div> : null}
            </div>
          </div>
          <div className="form-item">
            <input
              name="code"
              value={code}
              onChange={handleChange}
              onBlur={handleBlur}
              type="text"
              placeholder="请输入验证码"
            />
            <span onClick={getCode} className="code-text">
              {time <= 0 ? '发送验证码' : `${time}s`}
            </span>
            <div className="error">
              {touched.code && formik.errors.code ? <div>{errors.code}</div> : null}
            </div>
          </div>
          <div className="form-item">
            <button
              type="submit"
              disabled={isFirst || !isValid}
              className={isFirst ? '' : isValid ? 'active' : ''}
            >
              登录
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}
export default Login
